<template>
  <div class="filterPanel" :style="curStyle">
    <el-form :label-width="labelWidth" :label-position="labelPosition" :inline="true">
      <el-form-item
        v-for="i in rowList"
        :key="i.key"
        :label="i.title"
      >
        <component :is="i.key" :key="i.Id" :query="query" :extend="extend" :content-width="bodyWidth" v-bind="i" />
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Vue from 'vue'
export default {
  components: {
  },
  props: {
    id: {
      type: String,
      default: null
    },
    query: {
      type: Object,
      default: null
    },
    extend: {
      type: Object,
      default: null
    },
    item: {
      type: Object,
      default: null
    },
    width: {
      type: Number,
      default: null
    },
    children: {
      type: Array,
      default: null
    },
    contentWidth: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      rowList: [],
      curStyle: {
        textAlign: 'left'
      },
      labelWidth: '120px',
      labelPosition: 'right',
      bodyWidth: null
    }
  },
  computed: {},
  watch: {
    children: {
      handler(val) {
        this.reset()
      },
      immediate: true
    },
    width: {
      handler(val) {
        if (val && this.contentWidth) {
          this.init()
        }
      },
      immediate: true
    },
    contentWidth: {
      handler(val) {
        if (val && this.width) {
          this.init()
        }
      },
      immediate: true
    }
  },
  mounted() {
  },
  methods: {
    init() {
      let width = 0
      if (this.width === 23) {
        width = Math.round(this.contentWidth * 2 / 3) - 12
      } else {
        width = Math.round(this.contentWidth / this.width) - 12
      }
      this.curStyle.width = width + 'px'
      this.bodyWidth = width
    },
    format(control) {
      const t = {
        key: 'c_' + control.Id,
        id: control.Id,
        title: control.Name,
        width: control.WidthRatio,
        height: control.HeightGrid,
        show: control.Show,
        type: control.ControlType,
        code: control.Code,
        item: null,
        children: null
      }
      if (t.type === 0) {
        t.item = control.Statistics
      } else if (t.type === 1) {
        t.item = control.Chart ?? {}
      } else if (t.type === 4) {
        t.item = control.Table ?? {}
      } else if (t.type === 5) {
        t.item = control.Layout ?? {}
        if (control.Children != null && control.Children.length > 0) {
          t.children = control.Children.map(a => this.format(a))
        }
      } else if (t.type === 6) {
        t.item = control.ControlSet ?? {}
      } else if (t.type === 3) {
        t.item = control.Search ?? {}
      } else if (t.type === 2) {
        t.item = control.CensusTable ?? {}
      }
      Vue.component(t.key, function(resolve, reject) {
        require(['@/' + control.ControlPath + '.vue'], resolve)
      })
      return t
    },
    reset() {
      if (this.item) {
        this.labelPosition = this.item.LabelPosition
        this.labelWidth = this.item.LabelWidth + 'px'
        this.curStyle.textAlign = this.item.FormAlign ?? 'left'
      } else {
        this.labelPosition = 'right'
        this.labelWidth = '120px'
        this.curStyle.textAlign = 'left'
      }
      if (this.children != null && this.children.length > 0) {
        this.rowList = this.children.map(e => this.format(e))
      } else {
        this.rowList = []
      }
    }
  }
}
</script>
<style lang="css" scoped>
.el-form {
  background-color: #fff;
}
.dark .el-form {
  background-color: transparent !important;
}
.header .icon {
    font-size: 16px;
}
.header span {
    margin-left: 10px;
}
</style>
